<template>
  <a-row class="talkContent">
    <a-col :span="5" class="left">
      <div
        v-for="(item, index) in data"
        :key="index"
        class="bright"
        :class="{ active: current == index }"
        @click="change(index)"
      >
        <router-link :to="{ name: 'talkView' }">
          <div class="left-list">
            <div class="list-iron">
              <a-avatar src="https://z1.ax1x.com/2023/10/10/pPzn9yQ.png" />
            </div>
            <div class="list-title">
              {{ item.title }}
            </div>
          </div>
        </router-link>
      </div>
    </a-col>
    <a-col :span="19">
      <router-view></router-view>
    </a-col>
  </a-row>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    interface DataItem {
      title: string;
    }
    const data: DataItem[] = [
      {
        title: "Ant Design Title 1",
      },
      {
        title: "Ant Design Title 2",
      },
    ];
    let current = ref(0);
    let change = (index: number) => {
      current.value = index;
      console.log(current);
    };
    return {
      data,
      current,
      change,
    };
  },
});
</script>
<style lang="less" scoped>
.talkContent {
  word-break: normal;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  height: 88vh;
  //ie10+隐藏滚动条
  -ms-overflow-style: none;
  // firefox
  overflow: -moz-scrollbars-none;
  ::-webkit-scrollbar {
    //chrome 和 safari
    width: 0 !important;
  }
  .left {
    border-right: 1px solid #ccc;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    .left-list {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 30px 0px 30px 20px;
      color: #333;
      :hover {
        color: rgb(78, 144, 255);
      }
      // border: 1px solid #333;
      .list-title {
        margin-left: 10px;
        font-size: 14px;
        font-weight: bold;

        word-break: normal;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }
  }
}
.active {
  background-color: rgb(230, 247, 255);
  color: rgb(78, 144, 255);
  transition: all 0.2s linear;
  border-right: 2px solid #1880ff;
}
</style>
